<!--
@license
Copyright 2016 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/image-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="styles.html">

<dom-module id="vz-projector-projections-panel">
<template>
<style include="vz-projector-styles"></style>
<style>
:host {
  transition: height 0.2s;
}

.ink-button, ::shadow .ink-button {
  border: none;
  border-radius: 2px;
  font-size: 13px;
  padding: 10px;
  min-width: 100px;
  flex-shrink: 0;
  background: #e3e3e3;
}

.ink-panel-buttons {
  margin-bottom: 10px;
}

.two-way-toggle {
  display: flex;
  flex-direction: row;
}

.two-way-toggle span {
  padding-right: 7px;
}

.has-border {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.toggle {
  min-width: 0px;
  font-size: 12px;
  width: 17px;
  min-height: 0px;
  height: 21px;
  padding: 0;
  margin: 0px;
}

.toggle[active] {
  background-color: #880E4F;
  color: white;
}

.two-columns {
  display:flex;
  justify-content: space-between;
}

.two-columns > :first-child {
  margin-right: 15px;
}

.two-columns > div {
  width: 50%;
}

.dropdown-item {
  justify-content: space-between;
}

#z-container {
  display: flex;
  align-items: center;
  width: 50%;
}

#z-checkbox {
  margin: 27px 0 0 5px;
  width: 18px;
}

#z-dropdown {
  flex-grow: 1;
}

.notice {
  color: #880E4F;
}

.container {
  padding: 20px;
}

.book-icon {
  height: 20px;
  color: rgba(0, 0, 0, 0.7);
}
</style>
<div id="main">
  <div class="ink-panel-header">
    <div class="ink-tab-group">

      <div data-tab="tsne" id="tsne-tab" class="ink-tab projection-tab">t-SNE</div>
      <paper-tooltip for="tsne-tab" position="bottom" animation-delay="0" fit-to-visible-bounds>
        t-distributed stochastic neighbor embedding
      </paper-tooltip>

      <div data-tab="pca" id="pca-tab" class="ink-tab projection-tab">PCA</div>
      <paper-tooltip for="pca-tab" position="bottom" animation-delay="0" fit-to-visible-bounds>
        Principal component analysis
      </paper-tooltip>

      <div data-tab="custom" id="custom-tab" class="ink-tab projection-tab" title="Linear projection of two custom vectors">Custom</div>
      <paper-tooltip for="custom-tab" position="bottom" animation-delay="0" fit-to-visible-bounds>
        Search for two vectors upon which to project all points.
      </paper-tooltip>

    </div>
  </div>
  <div class="container">
    <!-- TSNE Controls -->
    <div data-panel="tsne" class="ink-panel-content">
      <div class="slider">
        <label>Dimension</label>
        <div class="two-way-toggle">
          <span>2D</span>
          <paper-toggle-button id="tsne-toggle" checked="{{tSNEis3d}}">3D</paper-toggle-button>
        </div>
      </div>
      <div class="slider tsne-perplexity">
        <label>
          Perplexity
          <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
          <paper-tooltip position="right" animation-delay="0" fit-to-visible-bounds>
            The most appropriate perplexity value depends on the density of the
            data. Loosely speaking, a larger / denser dataset
            requires a larger perplexity. Typical values for perplexity range
            between 5 and 50.
          </paper-tooltip>
        </label>
        <paper-slider id="perplexity-slider" pin min="2" max="100" value="30"></paper-slider>
        <span></span>
      </div>
      <div class="slider tsne-learning-rate">
        <label>
          Learning rate
          <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
          <paper-tooltip position="right" animation-delay="0" fit-to-visible-bounds>
            The ideal learning rate often depends on the size of the data,
            with smaller datasets requiring smaller learning rates.
          </paper-tooltip>
        </label>
        <paper-slider id="learning-rate-slider" snaps min="-3" max="2" step="1"
            value="1" max-markers="6">
        </paper-slider>
        <span></span>
      </div>
      <p>
        <button class="run-tsne ink-button" title="Re-run t-SNE">Re-run</button>
        <button class="stop-tsne ink-button" title="Stop t-SNE">Stop</button>
      </p>
      <p>Iteration: <span class="run-tsne-iter">0</span></p>
      <p id="tsne-sampling" class="notice">
        For fast results, the data will be sampled down to [[getTsneSampleSize()]] points.
      </p>
      <p>
        <iron-icon icon="book" class="book-icon"></iron-icon>
        <a target="_blank" href="http://distill.pub/2016/misread-tsne/">
          How to use t-SNE effectively.
        </a>
      </p>
    </div>
    <!-- PCA Controls -->
    <div data-panel="pca" class="ink-panel-content">
      <div class="two-columns">
        <div> <!-- Left column -->
          <paper-dropdown-menu style="width: 100%" vertical-align="bottom" no-animations label="X">
            <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{pcaX}}">
              <template is="dom-repeat" items="[[pcaComponents]]">
                <paper-item class="dropdown-item" value="[[item]]" label="Component #[[_addOne(item)]]">
                  Component #[[_addOne(item)]]
                </paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
          <paper-dropdown-menu no-animations vertical-align="bottom" label="Z" disabled="[[!hasPcaZ]]" id="z-dropdown">
            <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{pcaZ}}">
              <template is="dom-repeat" items="[[pcaComponents]]">
                <paper-item class="dropdown-item" value="[[item]]" label="Component #[[_addOne(item)]]">
                  Component #[[_addOne(item)]]
                </paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
        <div> <!-- Right column -->
          <paper-dropdown-menu style="width: 100%" vertical-align="bottom" no-animations label="Y">
            <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{pcaY}}">
              <template is="dom-repeat" items="[[pcaComponents]]">
                <paper-item class="dropdown-item" value="[[item]]" label="Component #[[_addOne(item)]]">
                  Component #[[_addOne(item)]]
                </paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
          <paper-checkbox id="z-checkbox" checked="{{pcaIs3d}}"></paper-checkbox>
        </div>
      </div>
      <p id="pca-sampling" class="notice">
        PCA is approximate.
        <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
      </p>
      <paper-tooltip for="pca-sampling" position="bottom" animation-delay="0" fit-to-visible-bounds>
        For fast results, the data was randomly projected down to [[getPcaSampledDim()]] dimensions.
      </paper-tooltip>
    </div>
    <!-- Custom Controls -->
    <div data-panel="custom" class="ink-panel-content">
      <paper-dropdown-menu style="width: 100%" no-animations label="Search by">
        <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{customSelectedSearchByMetadataOption}}">
          <template is="dom-repeat" items="[[searchByMetadataOptions]]">
            <paper-item class="dropdown-item" value="[[item]]" label="[[item]]">
              [[item]]
            </paper-item>
          </template>
        </paper-listbox>
      </paper-dropdown-menu>
      <div class="two-columns">
        <vz-projector-input id="xLeft" label="Left"></vz-projector-input>
        <vz-projector-input id="xRight" label="Right"></vz-projector-input>
      </div>
      <div class="two-columns">
        <vz-projector-input id="yUp" label="Up"></vz-projector-input>
        <vz-projector-input id="yDown" label="Down"></vz-projector-input>
      </div>
    </div>
  </div>
</div>
</template>
</dom-module>
